iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

Wordpress 外掛開發系列 第 5

「Wordpress 外掛開發」主選單設定(Administration Menus) - 下 submit_button/add_setting_error

  • 分享至 

  • xImage
  •  

儲存外掛設定,並且回傳至頁面上

我們應用著第三章的程式碼,套入原生的程式碼,可以去請求本身頁面的服務,讓option儲存,我們就不重複一次程式碼的使用,在點擊save 後,我們上面所選的option,會經由這個來做變化。

我們關鍵儲存的是submit_button,不過也有另外一個用法,是可以用get_submit_button且更高的客製性,因為他回傳的是Html本身,所以可以對自己加上不同的程式碼。

我們將一切包裝好吧!

我們還是與Hook息息相關,需要用到admin_init來讓我們做初始化,

你還需要驗證你的option

我們這裡需要驗證使用者輸入的資料是否正確與合乎我們的規則,我們這裡加上只能輸入英文字母為例,不過我們不在前端做驗證,我們靠著後端做驗證,所以我將收到的post以$_POST來做拿取資料,而更深入的資料驗證我們明天來做講解,不過我們就是先前在register section所以提供的$arg中,回傳的sanitize函式。

.
.
 $args = array(
        'type'=> 'string', 
        'sanitize_callback' => 'gogopowerranger_plugin_validate_options',
        'default' => NULL
    );

    register_setting( 'gogopowerranger_options_group', 'gogopowerranger_options', $args );
.
.

function gogopowerranger_plugin_validate_options( $input ) {

    $valid = array();
    $valid['name'] = preg_replace(
        '/[^a-zA-Z\s]/',
        '',
        $input['name'] );

    return $valid;

}

增加一點error setting

我們現在已經有了驗證,但並沒有錯誤的顯示,所以我們要使用add_setting_error來出現錯誤字樣,這邊的interface可以從reference去看好,主要是四個參數。

function gogopowerranger_plugin_validate_options( $input ) {

    $valid = array();
    $valid['name'] = preg_replace(
        '/[^a-zA-Z\s]/',
        '',
        $input['name'] );
    if($valid['name'] !== $input['name']){
       add_settings_error(
            'gogopowerranger__string',
            'gogopowerranger_name_error',
            '錯了,別亂搞',
            'error'
        );
    }

    return $valid;

}

現在兜起來

最後,我們開始將所以的東西拼湊起來,我們從開頭的Hook一一列表在這,就可以組裝出最基礎的設定啦!最後懺悔一下,週六的週末,只想好好的休息,腦袋昏昏沈沈打的程式碼完全就是在MD做的,因為現在的plugin還有太多其他的功能,所以就不從那邊節錄過來,如果有問題,我會再次看更正XD

  • admin_init / WebHook
  • add_options_page
  • add_settings_section
  • get_option
  • update_option

add_action( 'admin_menu', 'Ranger_add_settings_menu' );

function Ranger_add_settings_menu() {

    add_options_page( 'Ranger Plugin Settings', 'GOGO Settings', 'manage_options',
        'ranger_plugin', 'ranger_option_page' );

}
        
function ranger_option_page() {
    ?>
    <div class="wrap">
        <h2>Ranger plugin</h2>
        <form action="options.php" method="post">
            <?php 
            settings_fields( 'gogopowerranger_plugin_options' );
            do_settings_sections( 'gogopowerranger_plugin' );
            submit_button( 'Save Changes', 'primary' );  
            ?>
        </form>
    </div>
    <?php
}
        
add_action('admin_init', 'gogopowerranger_plugin_admin_init');

function gogopowerranger_plugin_admin_init(){
    $args = array(
        'type'=> 'string', 
        'sanitize_callback' => 'gogopowerranger_plugin_validate_options',
        'default' => NULL
    );

    register_setting( 'gogopowerranger_options_group', 'gogopowerranger_options', $args );
    
    //add a settings section
    add_settings_section( 
        'gogopowerranger_plugin_main', 
        'gogopowerranger Plugin Settings',
        'gogopowerranger_plugin_section_text', 
        'gogopowerranger_plugin' 
    );
    
    //create our settings field for name
    add_settings_field( 
        'gogopowerranger_plugin_name', 
        'Your Name',
        'gogopowerranger_plugin_setting_name', 
        'gogopowerranger_plugin', 
        'gogopowerranger_plugin_main' 
    );

}

// 印出section的header
function gogopowerranger_plugin_section_text() {
    echo '<p>來往這裡來阿斯</p>';
}
        
// 印出所有的field
function gogopowerranger_plugin_setting_name() {

    // 從資料庫取回gogopowerranger_plugin_options
    $options = get_option( 'gogopowerranger_plugin_options' );
    $name = $options['name'];
    // $blabla = $options['blabla']; 你可以加進options中來取回

    // 把這個資料當預設值印出來
    echo "<input id='name' name='gogopowerranger_plugin_options[name]'
        type='text' value='" . esc_attr( $name ) . "' />";

}

// 在這裡驗證輸入的資料是否正確,你可能需要學過一點正規表達式,不過意思是只能有英文
function gogopowerranger_plugin_validate_options( $input ) {

    $valid = array();
    $valid['name'] = preg_replace(
        '/[^a-zA-Z\s]/',
        '',
        $input['name'] );

    return $valid;

}

而最後,因為章節幅度,後面刪了一些想講的,比如說不出現標題與section,只要field顯示,刪除設定與使用wordpress UI元件來讓整體看起來一致性,大家可以多多翻看Wordpress 的指南,像是uninstall中刪除設定就會用到unregister_setting,而在UI的部分也可以從外層的.wrap開始,內容從標題到輸入匡,非常的豐富。

可以使用這個工具,裡頭是教導你該如何去使用wordpress後台的正確格式,以及他應該放置的class,這個小章節講了很多不同的函式處理,了解這些有助於你去更有效益的建構你自己的外掛,不過也千萬別把持著每個method都要用到的想法去做開發,做好規劃再一步一步選擇適當的函式來撰寫,但前提是你已經對這些函式有足夠的了解,下一章來講我之前還是小白時期寫的外掛備注入XSS以及官方指南是怎麼把破損的外掛一一補齊。

reference

Wordpress (3.8) Admin UI Style CSS Classes
add_settings_error
Settings API - format container of setting and setting's description


上一篇
「Wordpress 外掛開發」主選單設定(Administration Menus) - 中 - Option API/Setting API
下一篇
「Wordpress 外掛開發」外掛的權限偵測與安全性 nonce/Kses/wpdb
系列文
Wordpress 外掛開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
fuag
iT邦新手 4 級 ‧ 2022-02-06 15:51:44

HI

我複製程式碼卻出現 error, 請問這該如何修呢?

Error: Options page gogopowerranger_plugin_options not found in the allowed options list.

請問這 demo 的 plugin 有提供在 github 上直接下載測試嗎?

我要留言

立即登入留言